<script setup lang="ts">
import { computed } from 'vue';
import type { FormFieldConfig } from './types';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Checkbox } from '@/components/ui/checkbox';

import { AvatarUpload, FileUpload } from '@/components/file-upload';

interface Props {
  field: FormFieldConfig;
  componentField: Record<string, any>;
}

const props = defineProps<Props>();

// 计算公共属性
const commonProps = computed(() => {
  const { placeholder, disabled, readonly, props: fieldProps } = props.field;

  return {
    placeholder,
    disabled: disabled || readonly,
    ...fieldProps,
    ...props.componentField,
  };
});

// 计算文件上传组件的属性
const fileUploadProps = computed(() => {
  const { props: fieldProps } = props.field;

  return {
    ...commonProps.value,
    // 确保有默认的上传URL，或者从fieldProps中获取
    uploadUrl: fieldProps?.uploadUrl || '/file/upload',
    accept: fieldProps?.accept || '',
    multiple: fieldProps?.multiple || false,
    maxFileSize: fieldProps?.maxFileSize,
    uploadParams: fieldProps?.uploadParams || {},
    uploadHeaders: fieldProps?.uploadHeaders || {},
  };
});

// 计算头像上传组件的属性
const avatarUploadProps = computed(() => {
  const { props: fieldProps } = props.field;

  return {
    ...commonProps.value,
    // 确保有默认的上传URL，或者从fieldProps中获取
    uploadUrl: fieldProps?.uploadUrl || '/file/upload',
    uploadParams: fieldProps?.uploadParams || {},
    uploadHeaders: fieldProps?.uploadHeaders || {},
  };
});
</script>

<template>
  <div>
    <!-- 文本输入框 -->
    <Input
      v-if="field.type === 'text' || field.type === 'email' || field.type === 'password' || field.type === 'number' || field.type === 'tel' || field.type === 'url'"
      :type="field.type"
      v-bind="commonProps"
    />

    <!-- 多行文本输入框 -->
    <Textarea
      v-else-if="field.type === 'textarea'"
      v-bind="commonProps"
    />

    <!-- 下拉选择框 -->
    <Select
      v-else-if="field.type === 'select'"
      v-bind="commonProps"
    >
      <SelectTrigger>
        <SelectValue :placeholder="field.placeholder" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem
          v-for="option of field.options"
          :key="option.value as string"
          :value="option.value as string"
          :disabled="option.disabled"
        >
          {{ option.label }}
        </SelectItem>
      </SelectContent>
    </Select>

    <!-- 开关 -->
    <Switch
      v-else-if="field.type === 'switch'"
      v-bind="commonProps"
    />

    <!-- 复选框 -->
    <Checkbox
      v-else-if="field.type === 'checkbox'"
      v-bind="commonProps"
    />

    <!-- 文件上传 -->
    <FileUpload
      v-else-if="field.type === 'file-upload'"
      v-bind="fileUploadProps"
    />

    <!-- 头像上传 -->
    <AvatarUpload
      v-else-if="field.type === 'avatar-upload'"
      v-bind="avatarUploadProps"
    />

    <!-- 默认文本输入框 -->
    <Input
      v-else
      type="text"
      v-bind="commonProps"
    />
  </div>
</template>
